<template>
  <div class="app-container app-container-next app-container-detail" ref="container">
    <div class="head">
      <div class="head_left">
        <p class="title">开启浮窗通知</p>
        <el-switch
            v-model="settings.status"
            active-color="#1e90ff">
        </el-switch>
      </div>
    </div>
    <div class="sponge-tabs sponge-tabs-top tab_wrap sponge-tabs-line">
      <el-tabs v-model="activeName">
        <el-tab-pane label="浮窗模板" name="1">
          <div class="template_tab">
            <div class="temp">
              <p class="title">模板选择</p>
              <el-radio-group v-model="settings.template_config.template" class="sponge-radio-group">
                <el-radio class="sponge-radio-wrapper" label="template1">模板1
                  <div class="card" style="height: 240px">
                    <div class="container">
                      <div class="box1"><p class="device">PC端</p><img
                          src="">
                        <div class="desc"><p>Someone in Somewhere purchased</p>
                          <p class="title">Product Title</p>
                          <p>5 minutes ago</p></div>
                        <span class="close">×</span>
                      </div>
                      <div class="mobileBox">
                        <p class="device">移动端</p>
                        <i class="jyfont jy-cart icon_custom cart"></i>
                        <span class="text">S***e recently purchased</span>
                      </div>
                    </div>
                  </div>
                </el-radio>
                <el-radio class="sponge-radio-wrapper" label="template2">模板2
                  <div class="card" style="height: 290px;">
                    <div class="container">
                      <div class="box2"><p class="device">PC端</p><img
                          src="">
                        <div class="desc"><p class="title">Product Title</p>
                          <p class="text">Someone in Somewhere purchased</p>
                          <p class="time">5 minutes ago</p></div>
                        <span class="close">×</span></div>
                      <div class="mobileBox"><p class="device">移动端</p><i
                          class="jyfont jy-cart icon_custom cart"></i><span
                          class="text">S***e recently purchased</span>
                      </div>
                    </div>
                  </div>
                </el-radio>
                <el-radio class="sponge-radio-wrapper" label="template3">模板3
                  <div class="card">
                    <div class="container">
                      <div class="box3"><p class="device">PC端</p><img
                          src="">
                        <div class="desc"><p class="text">Someone</p>
                          <p class="text">recently purchased</p></div>
                      </div>
                      <div class="mobileBox"><p class="device">移动端</p><i
                          class="jyfont jy-cart icon_custom cart"></i><span
                          class="text">S***e recently purchased</span>
                      </div>
                    </div>
                  </div>
                </el-radio>
              </el-radio-group>
            </div>
            <div class="settings">
              <p class="title">预览</p>
              <div class="overview">
                <div  :class="[`overview_container${templateNameEnum[settings.template_config.template]}`]">
                  <div :class="[`box${templateNameEnum[settings.template_config.template]}`]"  :style="{background: settings.template_config.background_color}">
                    <p class="device">PC端</p>
                    <img
                        src="">
                    <div class="desc">
                      <p class="desc_title" :style="{paddingLeft: settings.template_config.template === 'template3' && '16px', color: settings.template_config.title_color}">{{settings.template_config.template === 'template3' ? 'Someone' : 'Someone in Somewhere purchased'}}</p>
                      <p class="pro_title"  :style="{color: settings.template_config.product_color}" v-if="settings.template_config.template === 'template1'">Product Title</p>
                      <p class="time" :style="{paddingLeft: settings.template_config.template === 'template3' && '16px', color: settings.template_config.time_color}">{{settings.template_config.template === 'template1' ? 'Recently' : settings.template_config.template === 'template2' ? '5 minutes ago' : 'recently purchased'}}</p>
                    </div>
                    <span class="close" style="color: rgba(255, 255, 255, 0.8);">×</span>

                  </div>
                  <div class="mobileBox" :style="{marginTop: settings.template_config.template === 'template2' && '5px', background: settings.template_config.m_background_color}"><p class="device">移动端</p><i
                      class="jyfont jy-cart icon_custom cart" :style="{color: settings.template_config.icon_color}"></i><span
                      class="m_cname" style="color: rgb(255, 255, 255);">Someone</span><span class="text"
                                                                                             style="color: rgb(255, 255, 255);">recently purchased</span>
                  </div>
                </div>
              </div>
              <p class="title">
                文案&样式
                <el-button type="primary">恢复默认设置</el-button>
              </p>
              <div class="input_item" style="margin-bottom: 20px;">
                <p class="label">标题</p>
                <el-input type="text" placeholder="{Buyer's Name} in {City, Country} purchased"
                          v-model="settings.template_config.title"/>
                <p class="desc_text"><span style="color: rgb(46, 96, 248); cursor: pointer;">{Buyer's Name}</span>&nbsp;=&nbsp;顾客姓名，<span
                    style="color: rgb(46, 96, 248); cursor: pointer;">{City, Country}</span>&nbsp;=&nbsp;顾客地址</p>
              </div>
              <div style="display: flex; flex-flow: column wrap; justify-content: space-between; margin-bottom: 30px;">
                <div class="sponge-row sponge-form-item" style="width: 50%;">
                  <div class="sponge-col sponge-form-item-control-wrapper">
                    <div
                        style="display: flex; font-size: 14px; justify-content: space-between; align-items: center; color: rgb(48, 52, 79); min-width: 300px;">
                      <span>背景颜色</span>
                      <el-color-picker
                          v-model="settings.template_config.background_color"
                          :predefine="predefineColors">
                      </el-color-picker>
                    </div>
                    <div
                        style="display: flex; font-size: 14px; justify-content: space-between; align-items: center; color: rgb(48, 52, 79); min-width: 300px;">
                      <span>标题颜色</span>
                      <el-color-picker
                          v-model="settings.template_config.title_color"
                          :predefine="predefineColors">
                      </el-color-picker>
                    </div>
                    <div
                        style="display: flex; font-size: 14px; justify-content: space-between; align-items: center; color: rgb(48, 52, 79); min-width: 300px;">
                      <span>商品名称</span>
                      <el-color-picker
                          v-model="settings.template_config.product_color"
                          :predefine="predefineColors">
                      </el-color-picker>
                    </div>
                    <div
                        style="display: flex; font-size: 14px; justify-content: space-between; align-items: center; color: rgb(48, 52, 79); min-width: 300px;">
                      <span>时间颜色</span>
                      <el-color-picker
                          v-model="settings.template_config.time_color"
                          :predefine="predefineColors">
                      </el-color-picker>
                    </div>
                    <div
                        style="display: flex; font-size: 14px; justify-content: space-between; align-items: center; color: rgb(48, 52, 79); min-width: 300px;">
                      <span>icon颜色</span>
                      <el-color-picker
                          v-model="settings.template_config.icon_color"
                          :predefine="predefineColors">
                      </el-color-picker>
                    </div>
                    <div
                        style="display: flex; font-size: 14px; justify-content: space-between; align-items: center; color: rgb(48, 52, 79); min-width: 300px;">
                      <span>移动端背景颜色</span>
                      <el-color-picker
                          v-model="settings.template_config.m_background_color"
                          :predefine="predefineColors">
                      </el-color-picker>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="展示设置" name="2">
        </el-tab-pane>
        <el-tab-pane label="商品范围" name="3"></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
    name: 'sales_pop',
    data () {
        return {
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)'
            ],
            activeName: '1',
            settings: {
                duration: 5,
                first_delay: 3,
                interval: 10,
                locate: 'left_down',
                loop_switch: 'open',
                max_times: 10,
                order_status: 'all',
                pages_list: [],
                purchasedText: 'recently purchased',
                status: 'close',
                time_unit: 'day',
                times_switch: 'close',
                template_config: {
                    anonymity_address: ['Somewher'],
                    anonymity_name: ['Someone'],
                    anonymity_switch: false,
                    background_color: 'rgba(33, 33, 33, 1)',
                    default_time: '24',
                    icon_color: 'rgba(249,168,2,1)',
                    m_background_color: 'rgba(0,0,0,0.8)',
                    product_color: 'rgba(255, 255, 255, 1)',
                    replace_switch: false,
                    template: 'template1',
                    time_color: 'rgba(255, 255, 255, 0.8)',
                    time_text: 'Recently',
                    title: '{Buyer\'s Name} in {City, Country} purchased',
                    title_color: 'rgba(255, 255, 255, 0.8)'
                }
            },
            pages_list: [
                {
                    title: '首页',
                    name: 'index'
                }, {
                    title: '专辑详情页',
                    name: 'collection-id'
                }, {
                    title: '商品详情页',
                    name: 'products-id'
                }, {
                    title: '购物车',
                    name: 'bag'
                }, {
                    title: '活动页',
                    name: 'rebate-id'
                }
            ],
            templateNameEnum: {
                'template1': '1',
                'template2': '2',
                'template3': '3'
            }

        };
    }
};
</script>

<style scoped lang="scss">
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;

  .head_left {
    display: inline-flex;
    align-items: center;
    line-height: 38px;

    .title {
      color: #30354d;
      font-size: 22px;
      margin-right: 24px;
    }
  }
}

.tab_wrap {
  border-radius: 4px;
  background: #fff;
}

.sponge-tabs {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: 'tnum';
  position: relative;
  overflow: hidden;
  zoom: 1;
}

.template_tab {
  display: flex;

  .device {
    margin: 0;
    position: absolute;
    top: -48px;
    font-size: 28px;
    color: #30354d;
  }

  .box1 {
    width: 540px;
    height: 200px;
    background: #212121;
    box-shadow: 0 6px 30px 0 rgb(0 0 0 / 20%);
    border-radius: 6px;
    display: flex;
    position: relative;

    img {
      width: 152px;
      height: 152px;
      margin: 24px;
      vertical-align: middle;
      border-style: none;
    }

    .desc {
      width: 280px;
      white-space: normal;
      padding: 24px 0;

      p {
        font-size: 18px;
        color: rgba(255, 255, 255, 0.8);
        line-height: 28px;
        margin: 0;

        &.title {
          margin-bottom: 20px;
        }
      }
      .pro_title {
        font-size: 22px;
        font-weight: 600;
        color: #fff;
        line-height: 32px;
        margin: 10px 0 18px 0;
      }
    }

    .close {
      color: #fff;
      font-size: 30px;
      line-height: 18px;
      position: absolute;
      top: 16px;
      right: 16px;
    }
  }

  .box2 {
    width: 180px;
    height: 316px;
    background: #ffffff;
    box-shadow: 0 4px 24px 0 rgb(0 0 0 / 20%);
    border-radius: 4px;
    position: relative;

    img {
      width: 114px;
      height: 114px;
      margin: 16px 34px;
      vertical-align: middle;
      border-style: none;
    }

    .desc {
      width: 148px;
      white-space: normal;
      margin: 0 auto;
      text-align: center;

      .title {
        font-size: 16px;
        font-weight: 600;
        color: #212121;
        line-height: 24px;
        margin-bottom: 20px;
      }

      .text {
        font-size: 13px;
        color: rgba(33, 33, 33, 0.6);
        line-height: 20px;
        margin: 6px 0 18px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .time {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        color: #212121;
        line-height: 24px;
      }
    }

    .close {
      color: #212121;
      font-size: 30px;
      line-height: 18px;
      position: absolute;
      bottom: 16px;
      left: 80px;
    }
  }

  .box3 {
    position: relative;
    display: flex;
    width: 432px;
    height: 140px;
    background: rgba(33, 33, 33, 0.8);
    box-shadow: 0 6px 30px 0 rgb(0 0 0 / 20%);
    border-radius: 6px;
    align-items: center;

    img {
      width: 140px;
      height: 140px;
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
      vertical-align: middle;
      border-style: none;
    }

    .desc {
      width: 280px;
      white-space: normal;

      .text {
        padding-left: 16px;
        font-size: 26px;
        color: rgba(255, 255, 255, 0.8);
        line-height: 28px;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
      }
    }
  }

  .mobileBox {
    position: relative;
    align-items: center;
    display: flex;
    margin-top: 36px;
    width: 418px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.8);
    transform: translateY(50px);
    font-size: 24px;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 30px 0 rgb(0 0 0 / 20%);

    .device {
      position: absolute;
      top: -48px;
      font-size: 28px;
      color: #30354d;
      margin: 0;
    }

    .cart {
      font-size: 32px;
      margin: 0 20px;
      color: #f9a802;
    }

    .text {
      font-size: 24px;
    }
  }

  .temp {
    flex: 1 1 50%;

    .title {
      color: #212b36;
      font-size: 18px;
      line-height: 25px;
      margin: 0;
      margin-bottom: 20px;
    }

    .sponge-radio-group {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5;
      list-style: none;
      font-feature-settings: 'tnum';
      display: inline-block;

      .sponge-radio-wrapper {
        margin: 0;
        display: flex;
        align-items: flex-start;
        margin-bottom: 30px;
        box-sizing: border-box;
        padding: 0;
        color: rgba(0, 0, 0, 0.65);
        font-variant: tabular-nums;
        line-height: 1.5;
        list-style: none;
        font-feature-settings: 'tnum';
        position: relative;
        margin-right: 8px;
        white-space: nowrap;
        cursor: pointer;
      }

      .card {
        float: right;
        margin-left: 40px;
        width: 300px;
        height: 216px;
        background: #e7e7e7;

        .container {
          transform: scale(0.5);
          transform-origin: top left;
          margin: 36px 15px;
        }
      }
    }
  }

  .settings {
    flex: 1 1 50%;
    min-width: 500px;
    padding: 0 90px 0 40px;
    border-left: 1px dashed #7e849c;

    .title {
      margin: 0 0 20px 0;
      color: #212b36;
      font-size: 18px;
      line-height: 25px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .overview {
      display: flex;
      flex: 1 0 400px;
      height: 300px;
      background: #e7e7e7;
      margin-bottom: 30px;
      position: relative;
      justify-content: center;
      align-items: center;

      .overview_container1, .overview_container3 {
        transform: scale(0.65);
      }
      .overview_container2 {
        transform: scale(0.58);
      }
    }

    .input_item {
      .label {
        color: #212b36;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 10px;
      }

      .desc_text {
        color: #212b36;
        margin-top: 10px;
        font-size: 14px;
        line-height: 20px;
      }
    }
  }
}
</style>
